<template>
  <swiper class="swiper" :slidesPerView="4" :spaceBetween="30" :modules="modules" :autoplay="{delay: 2500, disableOnInteraction: false}">
    <SwiperSlide v-for="item in props.swiperData" :key="item.id">
       <div class="img"><img :src="item.cover_url"/></div>
       <p class="title">{{item.title}}</p>
    </SwiperSlide>
  </swiper>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay } from 'swiper/modules'
import 'swiper/css'

const props = defineProps(['swiperData'])
const modules = [Autoplay]
</script>

<style lang="scss" scoped>
.swiper{
    margin-top: 15px;
    padding-bottom: 15px;
    border-bottom: 4px solid #ccc;
    z-index: 0;
    img{
        width: 100%;
        height: 80px;
    }
    .title{
        font-size: 12px;
        text-align: center;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
}
</style>
